<template>
    <div>
        <!-- 顶部 滑动条 区域 -->
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
					<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;">
						<a :class="['mui-control-item',item.id==0?'mui-active':'']" to="#item1mobile"  v-for="item in cates" :key="item.id" @click="getPhotoListByCateId(item.id)">
							{{item.title}}
						</a>
					</div>
				</div>
		</div>

		<!-- 图片列表区域 -->
		<ul class="photo-list">
			<router-link tag="li" v-for="item in imglist" :key="item.id" :to="'/home/photoinfo/'+item.id" >
				<img v-lazy="item.img_url">
				<div class="info">
					<h3 class="info-title">{{item.title}}</h3>
					<div class="info-body">{{item.desc}}</div>
				</div>
			</router-link>
		</ul>


    </div>


</template>

<script>
// 导入 mui 的js文件
import mui from '../../lib/mui/js/mui.min.js'
export default{
    data(){
        return {
			// 所有分类的列表数组
			cates:[
				{id:1,title:'新闻'},
				{id:2,title:'推荐'},
				{id:3,title:'热点'},
				{id:4,title:'社会'},
				{id:5,title:'社会1'},
				{id:6,title:'社会2'},
				{id:7,title:'社会3'},
			],
			// 存放图片地址
			imglist:[
				{id:1,title:'11111这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:2,title:'22222这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:3,title:'33333这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:4,title:'44444这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:5,title:'55555这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:6,title:'6666这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:7,title:'77777这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},
				{id:8,title:'8888这是图片文字的标题文字的标题啊',desc:'这是图片的说明和简介',img_url:"http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg"},

			]
		};
	},
	created(){
		this.getAllcategory();
		// 默认进入页面，就请求所有的图片列表数据
		this.getPhotoListByCateId(0);
	},

    // 当组件中的DOM结构被渲染好，并放到页面中后，会执行这个函数
    mounted(){
        // 初始化 滑动控件
		mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005, //flick 减速系数，

        });

    },
    methods:{
		// 获取所有图片分类
		getAllcategory(){
			// this.$http.get('api/getimgcategory').then(result=>{
			// 	if(result.body.status ===0){
			// 		// 手动拼接出一个最完整的分类
			// 		result.body.message.unshift({title:'全部',id:0});
			// 		this.cates = result.body.message;
			// 	}
			//})
			if(this.cates != ''){
				this.cates .unshift({title:'全部',id:0});
			}

		},

		// 根据图片列表 ID 获取图片的列表内容
		getPhotoListByCateId(cateid){
			// this.$http.get('api/getimages/'+cateid).then(result=>{
			// 	if(result.body.status === 0){
			// 		this.imglist = result.body.message;
			// 	}
			// })
			//console.log(this.imglist)

		}
    },
}


</script>

<style lang="scss" scoped>
*{
    touch-action: pan-y
}

.photo-list{
	list-style: none;
	margin-bottom: 40px;
	margin-top: 0;
	padding: 10px;
	padding-bottom: 10px;
	li{
		background-color: #ccc;
		text-align: center;
		width: 100%;
		margin-bottom: 10px;
		box-shadow: 0 0 9px #999;
		position: relative;// 相对定位，为了文字显示在图片上
		img{
			width: 100%;
			vertical-align: middle; //垂直对齐
			height: 80%;
		}
		// 图片样式
		img[lazy=loading] {
			width: 40px;
			height: 300px;
			margin: auto;
		}
		.info{
			color:white;
			text-align: left;
			position: absolute;
			bottom: 0;
			background-color: rgba(0,0,0,0.4);
			max-height: 84px;
			width: 100%;
			padding:2px 4px;
			.info-title{
				font-size: 14px;
			}
			.info-body{
				font-size: 13px;
			}
		}
	}
}













</style>

